<!-- 主要内容的左侧导航中的左侧菜单的二级菜单中的选项 -->
<template>
  <li class="second-menu-item" @click="changeCurrentOption(ChildInfo.fatherId,childKey)" :class="childKey === CurrentChildOption ? 'active-class' : ''">
    <i :class="ChildInfo.iClass"></i>
    <span class="nav-menu-item-title">{{ ChildInfo.title }}</span>
  </li>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { LeftNavMenuStore } from "../store/modules/LeftNavMenu";
export interface ChildInfo {
  fatherId:number  
  key: string;
  iClass: string;
  title: string;
}
@Component({
  name: "SecondMenuItem",
})
export default class extends Vue {
  get CurrentChildOption(): string {
    return LeftNavMenuStore.CurrentChildId;
  }
  @Prop() ChildInfo!: ChildInfo;
  childKey = this.$props.ChildInfo.key;
  id=this.$props.ChildInfo.fatherId
  // 改变Vuex存储的ChangeCurrentChildId
  changeCurrentOption(id:number,childKey:string):void{
        if(id!=LeftNavMenuStore.CurrentId){
            LeftNavMenuStore.ChangeCurrentId(id);
        }
        if(childKey!=LeftNavMenuStore.CurrentChildId){
            LeftNavMenuStore.ChangeCurrentChildId(childKey);
        }
        this.$router.push({
          name:this.ChildInfo.title
        })
    }
}
</script>

<style scoped>
.second-menu-item {
  font-weight: 500;
  display: flex;
  height: 46px;
  cursor: pointer;
  align-items: center;
  padding-left: 40%;
  width: 182px;
  box-sizing: border-box;
}
.second-menu-item > i {
  margin-right: 7.2px;
}
.second-menu-item:hover {
  background: #eee;
}
.active-class {
  font-weight: 700;
  background-color: #eee;
}
</style>